<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-vertical-demo"
    @select="selectGenre"
  >
    <el-menu-item index="电子产品">
      电子产品</el-menu-item
    >
    <el-menu-item index="家用电器">
      家用电器</el-menu-item
    >
    <el-menu-item index="时尚配饰">
      时尚配饰</el-menu-item
    >
    <el-menu-item index="音频设备">
      音频设备</el-menu-item
    >
  </el-menu>
</template>
    
    <script>
export default {
  data() {
    return {
      activeIndex: "", // 默认选中的菜单项
    };
  },
  created() {
    // 在组件创建时获取当前路由的名称，并设置为 activeIndex 的初始值
    this.activeIndex="电子产品";
  },
  methods: {
    selectGenre(index) {
      // 通知父组件更新当前选中的类别
       this.$emit('update-genre', index);
    }
  },
};
</script>
    
    <style>
.el-menu-vertical-demo {
  background-color: rgb(211, 220, 230);
}
.el-menu-vertical-demo .el-menu-item {
  font-size: 16px; /* 设置字体大小 */
  line-height: 60px; /* 设置行高 */
  padding: 0 20px; /* 设置内边距 */
  color: #333; /* 设置文字颜色 */
}



.el-menu-vertical-demo .el-menu-item:hover {
  color: #66b1ff; /* 设置选中项的文字颜色 */
}
</style>